<template>
	<view class="appBox" v-if="show">
		<view class="list-input">
			<form @submit.prevent="submit">
				<view class="item">
					<view class="acea-row row-middle">
						<input type="text" class="texts" placeholder="上传身份证自动填入" v-model="useRealRequest.realName"
							required disabled />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<input type="text" class="texts" placeholder="上传身份证自动填入" v-model="useRealRequest.cardId"
							required disabled :maxlength="18" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<input type="text" class="texts" placeholder="上传身份证自动填入" v-model="useRealRequest.address"
							required disabled />
					</view>
				</view>
				<view class="cards">
					<view class="card">
						<image v-if="useRealRequest.front" class="img"
							:src="HTTP_IMG_STATIC + '/' + useRealRequest.front"></image>
						<image @click="upLoadPic(1)" v-else class="img" src="/static/images/zCard.png" mode="widthFix">
						</image>

						<text>身份证正面</text>
					</view>
					<view class="card">
						<image v-if="useRealRequest.back" class="img"
							:src="HTTP_IMG_STATIC + '/' + useRealRequest.back"></image>
						<image @click="upLoadPic(2)" v-else class="img" src="/static/images/fCard.png" mode="widthFix">
						</image>
						<text>身份证反面</text>
					</view>
				</view>
			</form>
			<view class="desc">
				<view class=""> 温馨提示: </view>
				<view class="">
					请输入正确的姓名和身份证号，不正确会导致使用卡失效
				</view>
			</view>
		</view>
		<button v-if="!model.cardId" class="btn" @click="submit">保存</button>
	</view>
</template>

<script>
	import {
		HTTP_IMG_STATIC
	} from "@/config/app.js";
	import {
		gqRealnameInfoAdd,
		getUserInfo,
		gqRealnameInfo
	} from "@/api/user.js";
	export default {
		data() {
			return {
				useRealRequest: {},
				model: {},
				HTTP_IMG_STATIC,
				show: false,
			};
		},
		onLoad() {
			this.getRealnameInfo();
		},
		methods: {
			// 查询是否已实名
			async getRealnameInfo() {
				uni.showLoading({
					title: "正在加载",
				});
				await gqRealnameInfo()
					.then((res) => {
						this.model = res.result || {};
						this.useRealRequest = res.result || {};
					})
					.catch((err) => {
						this.$util.Tips({
							title: err,
						});
					})
					.finally(() => {
						uni.hideLoading();
						this.show = true;
					});
			},
			async getUserInfomation() {
				let that = this;
				await getUserInfo().then((res) => {
					that.$store.commit("UPDATE_USERINFO", res.result.userInfo);
				});
			},

			upLoadPic(type) {
				let that = this;
				let url
				if (type == 1) {
					url = 'sys/common/realUpload'
				} else {
					url = 'sys/common/upload'
				}
				that.$util.uploadImageOne({
							url,
							name: "file",
							count: 1,
						},
						function(res) {
							const {
								message,
								result
							} = res;
							if (type == 1) {
								that.useRealRequest={...result}
								that.useRealRequest.realName = result.name
								that.useRealRequest.cardId = result.number
								that.$set(that.useRealRequest, "front", result.path.split('/static/')[1]);
							}
							if (type == 2) {
								that.$set(that.useRealRequest, "back", message);
							}
						}
					),
					function(err) {
						that.$util.Tips({
							title: err,
						});
					};
				console.log();
			},
			async submit() {
				let that = this;
				if (!that.useRealRequest.realName)
					return that.$util.Tips({
						title: "请输入姓名",
					});
				if (!that.useRealRequest.cardId)
					return that.$util.Tips({
						title: "请输入身份证号",
					});
				const regex =
					/^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
				if (!regex.test(that.useRealRequest.cardId))
					return that.$util.Tips({
						title: "请输入正确的身份证号码",
					});
				if (!that.useRealRequest.front)
					return that.$util.Tips({
						title: "请上传身份证正面图片",
					});
				if (!that.useRealRequest.back)
					return that.$util.Tips({
						title: "请上传身份证反面图片",
					});
				gqRealnameInfoAdd(that.useRealRequest)
					.then((res) => {
						uni.showToast({
							title: res.message,
							icon: "success",
						});
						that.getUserInfomation();
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					})
					.catch((res) => {
						that.$util.Tips({
							title: res,
						});
					});
			},
		},
	};
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import url("../../static/css/gstyle.scss");

	.appBox {
		background-color: #f5f6f7;
		height: 100%;
		padding: 33rpx 33rpx 16rpx 33rpx;

		

		.list-input {
			.item {
				border-bottom: 1px solid #f0f0f0;
				background: #fff;

				.row-middle {
					position: relative;
					padding: 0 25rpx;
					margin-top: 20rpx;

					.texts {
						flex: 1;
						font-size: 28rpx;
						height: 89rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					input {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.cards {
				display: flex;
				justify-content: space-between;
				margin-top: 83rpx;

				.card {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #333333;

					.img {
						width: 306rpx;
						height: 198rpx;
						margin-bottom: 38rpx;
					}
				}
			}
		}
	}

	page {
		background-color: #fff !important;
	}
</style>